<template>
    <div>
        <div>从store中取的openid为：{{openid}}</div>
        <div>{{msg}}</div>
        <p>{{msg}}</p>
        <h3>{{msg}}</h3>
        <span>{{msg}}</span>
        <div @click="show1">abc</div>
        <x-dialog v-model='showD'>
            <div class="img-box">
                我是弹层的内容
                <x-button type="primary" @click.native="showD=!showD">关闭</x-button>
            </div>
        </x-dialog>
        <actionsheet v-model="showAs" :menus="menus8" :close-on-clicking-mask="true" :close-on-clicking-menu="false" :show-cancel="true">
        </actionsheet>
        <x-button type="primary" @click.native="show1">toast弹窗</x-button>
        <x-button type="primary" @click.native="show2">alert弹层</x-button>
        <x-button type="primary" @click.native="show3">confirm弹层</x-button>
        <x-button type="primary" @click.native="show4">dialog弹层</x-button>
        <x-button type="primary" @click.native="show5">Actionsheet弹层</x-button>
        <divider>我是有底线的分割线</divider>
        <x-button type="primary" @click.native="getLoc1">获取地理位置</x-button>
    </div>
</template>

<script>
import Vue from 'vue'
import mixin_wx from '@/api/mixin_wx'
import { Group, Cell, Loading, XButton, XDialog, Actionsheet, Divider } from 'vux'
import {ToastPlugin } from 'vux'
import { AlertPlugin, ConfirmPlugin } from 'vux'

import axios from '@/api/axios'
import api from '@/api/base.api'
import { mapState } from 'vuex'
Vue.use(ToastPlugin);
Vue.use(AlertPlugin);
Vue.use(ConfirmPlugin);
export default {
    mixins: [mixin_wx],
    components: {
        Group,
        Cell,
        Loading,
        XButton,
        XDialog,
        Actionsheet,
        Divider
    },
    mounted() {
    },
    data() {
        return {
            msg: 'Hello World!',
            showD: false,
            showAs: false,
            menus8: {
                menu1: 'Close me',
                menu2: 'Close me'
            }
        }
    },
    computed:{
        ...mapState({
            openid: state => state.openid
        })
    },
    methods: {
        getLoc1() {
            this.getLoc(function(res){
                console.log(res);
            })
        },
        getData() {
            var _this = this;
            _this.$store.dispatch('updateLoading', true);
            axios({
                methods: 'GET',
                url: api.getInfo
            }).then(function (rtn) {
                _this.$store.dispatch('updateLoading', false);
                //_this.$store.dispatch('updateLoading',false);
                console.log(rtn);
            }).catch(function (err) {
                _this.$store.dispatch('updateLoading', false);
                console.log(err);
            })
        },
        show1() {
            this.$vux.toast.text("我是很长的文本啊我是很长的文本啊我是很长的文本啊我是很长的文本啊");
        },
        show2() {
            this.$vux.alert.show({
                title: 'Vux is Cool',
                content: 'Do you agree?',
                onShow() {
                    console.log('Plugin: I\'m showing')
                },
                onHide() {
                    console.log('Plugin: I\'m hiding')
                }
            })
        },
        show3() {
            this.$vux.confirm.show({
                title: 'Title',
                content: 'Content',
                onShow() {
                    console.log('plugin show')
                },
                onHide() {
                    console.log('plugin hide')
                },
                onCancel() {
                    console.log('plugin cancel')
                },
                onConfirm() {
                    console.log('plugin confirm')
                }
            })
        },
        show4() {
            this.showD = !this.showD;
        },
        show5() {
            this.showAs = !this.showAs;
        }
    }
}
</script>

<style>
.vux-demo {
    text-align: center;
}

.logo {
    width: 100px;
    height: 100px
}
</style>
